import React, { useEffect, useState, useRef } from 'react'
import "../sc.css"
function minlb() {
  const imglist = [
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/c6936abf-c737-4e72-be1a-a3e79adca37c",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/ce491dfa-281f-466f-aaed-29462c3e86a7",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/c6936abf-c737-4e72-be1a-a3e79adca37c",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/ce491dfa-281f-466f-aaed-29462c3e86a7",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/c6936abf-c737-4e72-be1a-a3e79adca37c",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/ce491dfa-281f-466f-aaed-29462c3e86a7",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/c6936abf-c737-4e72-be1a-a3e79adca37c",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/ce491dfa-281f-466f-aaed-29462c3e86a7",
    "//pub-cdn-oss.chuangkit.com/material_kind/first_kind_background_image/2023/05/19/ce491dfa-281f-466f-aaed-29462c3e86a7"
  ]
  const imgmap = imglist.map((item, index) => {
    return <li key={index}><img src={item} alt="" /></li>
  })
  const slider = useRef(null)
  const btn = (e) => {

    let target = e.target
    // 右按钮
    if (target.className === 'next-btn') {
      slider.current.style.left = '-420px ';
      slider.current.style.transition = 'all 3s';
    }
    // 左按钮
    if (target.className === 'prev-btn') {
      slider.current.style.left = '0px';
    }
  }
  return (
    <div>
      <div>
        <div className="slider-container" onClick={btn}>
          <div className="slider" ref={slider}>
            {imgmap}
          </div>
          <button className="prev-btn">&#10094;</button>
          <button className="next-btn">&#10095;</button>
        </div>
      </div>
    </div>
  )
}

export default minlb
